<template>
  <div class="page-head">
    <n-breadcrumb class="breadcrumb">
      <n-breadcrumb-item>任务列表</n-breadcrumb-item>
    </n-breadcrumb>
  </div>
  <div class="page-container">
    <n-space vertical>
      <!-- 搜索条件 -->
      <n-form :model="queryState" inline label-placement="left" label-width="auto" autocomplete="off">
        <n-form-item label="关键词" name="keyword">
          <n-input v-model:value="queryState.keyword"></n-input>
        </n-form-item>
        <n-form-item>
          <n-button type="primary" attr-type="submit" @click="onQuery">搜索</n-button>
        </n-form-item>
      </n-form>

      <!-- 数据表 -->
      <n-data-table remote pagination-behavior-on-filter="first" :columns="columns" :data="dataSource"
        :pagination="pagination" striped @update:page="handlePageChange" />

    </n-space>
  </div>
</template>

<script setup lang="ts">
import { NAvatar, NEllipsis, NText } from 'naive-ui';
import { computed, h, onMounted, reactive, toRaw } from 'vue';
import { usePagination } from 'vue-request';
import { formatNormalTime } from "../../assets/js/utils";
import { getUserPage } from '../../config/api';

const queryState = reactive({
  keyword: '',
});

const onQuery = () => {
  run({
    current: current.value,
    pageSize: pageSize.value,
    ...toRaw(queryState)
  });
}

const columns = [
  { title: '用户ID', key: 'id', sorter: false, width: '15%' },
  {
    title: '用户信息', key: 'userInfo', width: '20%', render(row: any) {
      return h(
        'div',
        {
          style: 'display: flex; align-items: center;'
        },
        [
          h(NAvatar, {
            round: true,
            style: 'margin-right: 12px;',
            src: row.headImageUrl
          }),
          h('div', null, [
            h('div', null, [h(NText, { depth: 2 }, { default: () => row.nickName })]),
            h('div', { style: 'font-size: 12px;' }, [
              h(
                NEllipsis,
                { depth: 3, style: 'max-width: 80px' },
                { default: () => '这家伙什么也没说~' }
              )
            ])
          ])
        ]
      )
    }
  },
  { title: '手机号', key: 'mobile', width: '15%' },
  {
    title: '注册时间', key: 'createTime', render(row: any) {
      return h('span', formatNormalTime(row.createTime))
    }
  },
  {
    title: '最近登录', key: 'gmtLastLogin', render(row: any) {
      return h('span', formatNormalTime(row.gmtLastLogin))
    }
  },
  { title: '操作', key: 'action' },
];

const {
  data,
  run,
  loading,
  current,
  pageSize,
  total,
  totalPage,
} = usePagination(getUserPage, {
  defaultParams: [{
    pageSize: 5,
  }],
  pagination: {
    totalKey: 'total',
  },
});

const dataSource = computed(() => data.value?.list || []);
const pagination = computed(() => ({
  page: current.value,
  pageCount: totalPage.value,
  pageSize: pageSize.value,
  itemCount: parseInt(total.value + ''),
  suffix: () => `共 ${total.value} 条数据`
}));

const handlePageChange = (currentPage: number) => {
  run({
    current: currentPage,
    pageSize: pageSize.value,
    ...toRaw(queryState)
  });
};

</script>

<style scoped>

</style>
